<template>
  <div>
    <MyTabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.path }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </MyTabs>
    <Header
      :category="categoryList"
      :value.sync="category"
      :searchValue.sync="title"
      :type="materialType"
      @change="handleCategoryChange"
      @submit="handleSearchSubmit"
      @upload="uploadVisible = true"
      @manage="groupingVisible = true"
    ></Header>
    <el-row :gutter="16" class="video-wrappr">
      <el-checkbox-group v-model="checkList" @change="changeCheckList">
        <el-col :span="8" v-for="(item, index) in materialList" :key="index">
          <div class="item">
            <div class="top">
              <div class="img" @click="handlePreview(item)">
                <el-image :src="require('@/assets/images/material/audio.png')"></el-image>
              </div>
              <div class="right">
                <div class="title" @click="handlePreview(item)">
                  {{ item.filename }}
                </div>
                <div class="info">
                  <span class="text">{{ item.filesize }}</span>
                  <span class="text">{{ item.duration_format }}</span>
                </div>
              </div>
            </div>
            <div class="bottom">
              <el-checkbox :label="item.id"></el-checkbox>
              <div class="right">
                <span
                  class="el-icon-edit-outline"
                  @click="handleModifyFilename(item)"
                  v-if="recycle == 0"
                ></span>
                <span class="el-icon-delete" @click="handleMaterialDelete(item)"></span>
              </div>
            </div>
          </div>
        </el-col>
      </el-checkbox-group>
      <edu-no-data v-if="$util.isEmpty(materialList)" marginTop="200px"></edu-no-data>
    </el-row>
    <Footer
      @handleCurrentChange="handleCurrentChange"
      :checkAll.sync="checkAll"
      :indeterminate="isIndeterminate"
      @select="handleCheckAllChange"
      @delete="handleDeleteAll"
      @move="handleMoveMaterial"
      :recycle="recycle"
      @recycle="handleRecycleChange"
    ></Footer>
    <upload-file
      v-if="uploadVisible"
      :visible.sync="uploadVisible"
      :type="materialType"
      :category="categoryList"
      @reload="handleReload(1)"
    ></upload-file>
    <modify-name v-if="nameVisible" :visible.sync="nameVisible" :data="materialData"></modify-name>
    <move-material
      v-if="moveVisible"
      :visible.sync="moveVisible"
      :type="materialType"
      :checkList="checkList"
      :category="categoryList"
      @reload="handleReload"
    ></move-material>
    <Grouping
      v-if="groupingVisible"
      :visible.sync="groupingVisible"
      :type="materialType"
      @reload="handleReload(2)"
    ></Grouping>
    <PreviewAudio
      v-if="previewVisible"
      :visible.sync="previewVisible"
      :src="previewSrc"
      :title="previewTitle"
    ></PreviewAudio>
  </div>
</template>

<script>
import MyTabs from '@/views/my/components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import Header from './components/header.vue'
import Footer from './components/footer.vue'
import UploadFile from './components/uploadFile.vue'
import ModifyName from './components/modifyName.vue'
import MoveMaterial from './components/moveMaterial.vue'
import Grouping from './components/grouping.vue'
import PreviewAudio from './components/previewAudio.vue'
import { mapState } from 'vuex'
export default {
  components: {
    MyTabs,
    EduNoData,
    Header,
    Footer,
    UploadFile,
    ModifyName,
    MoveMaterial,
    Grouping,
    PreviewAudio
  },
  data() {
    return {
      tabList: [
        {
          path: '/my/classes/material',
          title: '图片'
        },
        {
          path: '/my/classes/material/video',
          title: '视频'
        },
        {
          path: '/my/classes/material/audio',
          title: '音频'
        },
        {
          path: '/my/classes/material/file',
          title: '文档'
        }
      ],
      categoryList: [],
      materialType: 2,
      checkList: [],
      category: 0,
      recycle: 0,
      title: '',
      uploadVisible: false,
      nameVisible: false,
      materialData: {},
      checkAll: false,
      isIndeterminate: false,
      moveVisible: false,
      groupingVisible: false,
      previewVisible: false,
      previewSrc: '',
      routePath: this.$route.path
    }
  },
  computed: {
    ...mapState('material', {
      materialList: state => state.materialList
    })
  },
  methods: {
    // 分页
    handleCurrentChange() {
      let params = {
        page: this.$store.getters['paginate/page']
      }
      this.handleGetDataSucc(params)
    },
    // 获取列表数据
    getMaterialList() {
      let params = {
        page: 1
      }
      this.handleGetDataSucc(params)
    },
    handleGetDataSucc(params) {
      let count = 18
      params = {
        ...params,
        count: count,
        type: this.materialType,
        category: this.category,
        title: this.title,
        trashed: this.recycle
      }
      this.$store.dispatch('material/GET_MATERIAL_LIST', { params: params })
    },
    // 分组列表数据
    getMaterialCategoryList() {
      let params = {
        type: this.materialType,
        in: 0
      }
      this.$store.dispatch('material/GET_CATEGORY_LIST', { params: params }).then(res => {
        this.categoryList = res.data
      })
    },
    // 切换分组
    handleCategoryChange() {
      this.title = ''
      this.recycle = 0
      this.getMaterialList()
      this.removeChoose()
    },
    // 搜索
    handleSearchSubmit() {
      let params = {
        page: 1
      }
      this.handleGetDataSucc(params)
      this.removeChoose()
    },
    // 修改文件名字
    handleModifyFilename(data) {
      this.materialData = data
      this.nameVisible = true
    },
    // 单项删除
    handleMaterialDelete(item) {
      this.deleteMaterial(item.id)
    },
    // 批量删除
    handleDeleteAll() {
      if (this.checkList.length === 0) {
        this.$message.info('请选择要删除的素材')
        return
      }
      this.deleteMaterial(this.checkList)
    },
    // 素材删除
    deleteMaterial(ids) {
      let _this = this
      let txt = '确认移动到回收站吗？'
      // 已经在回收站了
      if (_this.recycle) txt = '删除后将无法找回素材，请谨慎操作'
      _this.$messageBox
        .confirm(txt)
        .then(() => {
          _this.$api.deleteUserTeacherMaterial(
            { ids: ids.toString(), trashed: this.recycle },
            res => {
              _this.$message.success(res.msg)
              _this.handleReload()
            },
            error => {
              _this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 多选
    changeCheckList(checkList) {
      let checkedCount = checkList.length
      this.checkAll = checkedCount === this.materialList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.materialList.length
    },
    // 全选
    handleCheckAllChange(val) {
      let cityOptions = this.materialList.map(item => item.id)
      this.checkList = val ? cityOptions : []
      this.isIndeterminate = false
    },
    // 移动素材分组
    handleMoveMaterial() {
      let _this = this
      if (_this.checkList.length === 0) {
        _this.$message.info('请选择要移动的素材')
        return
      }
      _this.moveVisible = true
    },
    // 加载数据
    handleReload(type) {
      let _this = this
      // 1 上传 2 管理分组
      if (type === 1) {
        _this.getMaterialList()
        _this.getMaterialCategoryList()
      } else if (type === 2) {
        _this.getMaterialCategoryList()
      } else {
        _this.getMaterialList()
        _this.getMaterialCategoryList()
        _this.removeChoose()
      }
    },
    // 清除选择
    removeChoose() {
      let _this = this
      _this.checkList = []
      this.checkAll = false
      _this.isIndeterminate = false
    },
    // 回收站
    handleRecycleChange() {
      this.title = ''
      this.category = ''
      this.recycle = 1
      let params = {
        page: 1
      }
      this.handleGetDataSucc(params)
      this.removeChoose()
    },
    // 预览
    handlePreview(item) {
      this.previewVisible = true
      if (this.$util.array(item.attach_url)) {
        this.previewSrc = item.attach_url[0].play_url
      } else {
        this.previewSrc = item.attach_url
      }
      let index = item.filename.lastIndexOf('.')
      let fileName = item.filename.substring(0, index)
      this.previewTitle = fileName
    },
    handleClickMenu(data) {
      this.$router.push({
        path: data.path
      })
    }
  },
  created() {
    this.handleReload()
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
    this.$store.commit('material/SET_MATERIAL_RESET')
  }
}
</script>

<style lang="scss">
.el-popover {
  min-width: 0;
}
.popover-wrapper {
  .item {
    padding: 5px 0;
    font-size: 12px;
    font-weight: 400;
    color: $text-color-secondary;
    text-align: center;
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
.video-wrappr {
  min-height: 600px;
  .item {
    margin-top: 16px;
    border: 1px solid #e4e7ed;
    .top {
      display: flex;
      padding: 10px;
      .img {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dcdfe6;
        cursor: pointer;
        .el-image {
          width: 24px;
          height: 28px;
        }
      }
      .right {
        margin-left: 10px;
        flex: 1;
        .title {
          width: 188px;
          font-size: 14px;
          font-weight: 400;
          color: $text-color-import;
          @include ellipsis();
          cursor: pointer;
        }
        .info {
          margin-top: 24px;
          display: flex;
          justify-content: space-between;
          .text {
            font-size: 12px;
            font-weight: 400;
            color: $text-color-auxiliary;
          }
        }
      }
    }
    .bottom {
      height: 28px;
      padding: 0 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #e4e7ed;
      background-color: #f7f7f7;
      ::v-deep .el-checkbox__label {
        opacity: 0;
      }
      .right {
        span {
          cursor: pointer;
          font-size: 14px;
          color: $text-color-auxiliary;
        }
        .el-icon-delete {
          margin-left: 24px;
        }
      }
    }
  }
}
</style>
